<template>
	<view class="body">
		<xk-header title="物业信息"></xk-header>
		<view class="util-bar">
			<!--搜索框 start-->
			<!-- <view class="top-white-box">
				
				<view class="search-box">
					<u-search shape="square" placeholder="输入搜索内容" height="42" :showAction="false" v-model="formdata.searchKey" @search="searchHandle"></u-search>
				</view>
				
			</view> -->
			<!--搜索框 end-->
			<!--查询日期 start-->
			<!-- <view class="select-search-btn">
				<u-row>
					<u-col span="4" offset="1">
						<view @click="showDate= true">
							<u--text suffixIcon="arrow-down-fill" size="16" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
						</view>
						<u-datetime-picker
							:show="showDate"
							v-model="valuePickerDate"
							mode="year-month"
							@cancel="cancelDate"
							@confirm="confirmDate"
						></u-datetime-picker>
					</u-col>
					<u-col span="2"><view @click="resetSort()">重置</view></u-col>
				</u-row>
			</view> -->
			<!--查询日期 end-->
		</view>

			<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true"  @scrolltolower="getData"  scroll-y >
				<view v-if="assetsList.length > 0" class="data-list" style="padding-top: 20rpx;">
					<!-- <checkbox-group @change="checkboxChange"> -->
						<view class="data-item" v-for="(item, index) of assetsList" :key="index">
							<view>
								<view class="item-top">
									<view class="title">物业编号: {{item.property_code || ""}}</view>
								</view>
								<view class="item-middel">
									<view class="info">
										<view>
											<view class="name">{{item.property_address || "-"}}</view>
											<view class="desc">招租定位：{{item.leasing_positioning}}	</view>
										</view>
										<view>
											<view class="amount">物业类型：{{item.property_type_name}}</view>
											<view class="desc">物业配置：{{item.property_deploy}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="btn-view" >
								<view class="common-btn btn-sty2 btn" @click="addBuild(item,index)">添加</view>
							</view>
						</view>
					<!-- </checkbox-group> -->
					<view class="bottom-a">已经到底啦~</view>
				</view>
				<view class="empty-view" v-else>
					<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
					<view>哎呀，该界面暂无内容~</view>
				</view>
				<!-- <view class="common-zw" style="width: 750rpx;"></view> -->

			</scroll-view>
			<view class="common-bottom-view select-view" style="height: 280rpx;width: 100%;">
				<view class="wy-title" @click="selectBuilding">已选中物业,点击返回</view>
				<view class="select-list">
					<view v-for="(item, index) of selectItem" :key="index" class="select-item">
						<view class="info">{{item.property_code}}/{{item.property_type_name}}/{{item.property_address}}</view>
						<image @click="deleteItem(item,index)" class="del-icon" :src="(imgUrl+'/wx/delete.png')"></image>
					</view>
				</view>
			</view>
		<!-- <view class="common-bottom-view select-view" style="height: 200rpx;">
			<view class="title">已选中物业</view>
			<view class="select-list">
				<view v-for="(item, index) of selectItem" :key="index" class="select-item">
					<view class="info">{{item.tag_name}}/{{item.building}}/{{item.storey}}</view>
					<image @click="deleteItem(index)" class="del-icon" src="../../static/delete.png"></image>
				</view>
			</view>
		</view> -->

		<u-popup
		:show="showWY"
		:round="8"
		closeable
		@close="showWY = false"
		customStyle="height:60%"
		>
			<view class="wy-title2" @click="judge">价格填写(点击确定)</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="wybox">
					<u-row customStyle="margin-bottom:10px">
						<u-col span="5"><view class="wy-left-text">出价月租金(元):</view></u-col>
						<u-col span="7"><view style="background: #fff;"><u--input v-model="price.rentMoney" placeholder="请输入出价月租金" border="none" type="number"></u--input></view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:10px">
						<u-col span="5"><view class="wy-left-text">成交月租金(元):</view></u-col>
						<u-col span="7"><view style="background: #fff;"><u--input v-model="price.clinchMoney" placeholder="请输入成交月租金" border="none" type="number"></u--input></view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:10px">
						<u-col span="5"><view class="wy-left-text">月租金底价(元/月/间):</view></u-col>
						<u-col span="7"><view style="background: #fff;"><u--input v-model="price.pricingRentPrice" placeholder="请输入月租金底价" border="none" type="number"></u--input></view></u-col>
					</u-row>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				formdata:{
					searchKey:'',
					dateMonth:'',
				},
				wuyIndex:'',
				final:{},
				price:{
					rentMoney:'',
					clinchMoney:'',
					pricingRentPrice:''
				},
				showWY:false,
				scrollViewHeight: 0,
				startNum: 0,
				isAll: false,
				assetsList: [],
				selectItemMap: {},
				selectItem: [],
				notNull: {
					rentMoney: "请填写出价月租金",
					clinchMoney: "请填写成交月租金",
					pricingRentPrice:"请填写月租金底价"
				},
			}
		},
		onLoad(options){
			if(options.ids){
				this.selectItem = JSON.parse(options.ids || '[]')
				for(let item of this.selectItem){
					this.selectItemMap[item.property_id] = true;
				}
			}
			this.getData();
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		methods: {
			searchHandle(){

			},
			deleteItem(item,index){
				this.selectItem.splice(index, 1);
				this.assetsList.push(item)
			},
			addBuild(item,index){
				console.log('item',item)
				this.wuyIndex = index
				console.log("index:",this.wuyIndex)
				this.showWY=true;
				this.addPrice(item)
			},
			addPrice(item){
				console.log('item2',item)
				console.log("final2:",this.final)
				this.final = {
					property_address: item.property_address,
					property_type_name: item.property_type_name,
					property_code: item.property_code,
					pi_hangnet_det_id: item.pi_hangnet_det_id,
					// pricing_rent_price: item.pricing_rent_price
				}
				console.log("selectItem:",this.selectItem)
				uni.$emit('getBuildInfo', this.selectItem);
			},
			judge(){
				for (let content in this.notNull) {
					if (!this.price[content]) {
						this.$util.toast(this.notNull[content]);
						return;
					}
				}
				this.final.rent_money = this.price.rentMoney
				this.final.clinch_money = this.price.clinchMoney
				this.final.pricing_rent_price = this.price.pricingRentPrice
				this.selectItem.push(this.final)
				this.final = {}
				this.price.rentMoney = ''
				this.price.clinchMoney = ''
				this.price.pricingRentPrice = ''
				console.log("selectItem:",this.selectItem)
				console.log("wuyIndex:",this.wuyIndex)
				this.assetsList.splice(this.wuyIndex,1)
				console.log("assetsList-pop:",this.assetsList)
				this.showWY = false
			},
			selectBuilding(){
				uni.navigateBack()
			},
			getData(){
				if(!this.isAll){
					let params = {
						start: this.startNum,
					}
					//搜索
					if(this.formdata.searchKey){
						params.searchKey = this.formdata.searchKey
					}
					this.$api.piHangNetData_list(params,'EFFICIENT').then((res)=>{
						console.log("挂牌列表：",res.EFFICIENT)
						console.log("物业列表：",res.EFFICIENT[0].dets)

						if(res.EFFICIENT.length < 20){
							this.isAll = true;
						}
						if(this.startNum == 0){
							for(var i = 0;i < res.EFFICIENT.length;i++){
								for(var j = 0;j < res.EFFICIENT[i].dets.length;j++){
									this.assetsList.push(res.EFFICIENT[i].dets[j])
								}
							}
							console.log("获取的物业信息：",this.assetsList)
							// this.assetsList = res.EFFICIENT;
						}else{
							this.assetsList = this.assetsList.concat(res.EFFICIENT);
						}
						this.startNum += 20;
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
.select-search-btn{
	margin:15px 0px 10px 10px;
}
.search-box{
	padding:10px 15px 10px 15px;
}
.top-white-box{
	background:#FFFFFF;
	margin-bottom:-2px;
}
.bottom-a{
	height: 160px;
	text-align: center;
	padding-top: 8px;
	font-size: 12px;
	color: #6E6E6E;
}
.wy-title{
	color: #fff;
	text-align: center;
	font-size:18px;
	padding:5px 0 5px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#58ACFA;
	border-radius:8px 8px 0 0;
}
.wy-title2{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:10px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
.picker-bar {
	display: flex;
	background-color: #FFFFFF;
	justify-content: space-around;
	align-items: center;
	height: 100rpx;
	flex-direction: row;
	font-size: 28rpx;
	font-weight: bold;
	.sort-item-view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		.xiala {
			width: 21rpx;
			height: 13rpx;
			margin-left: 10rpx;
		}
	}
	.scan-view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		.scan {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}
}
.common-bottom-view{
	display: flex;
	flex-direction: column;
	// padding: 10rpx 10rpx 10rpx 10rpx;
	box-sizing: border-box;
	// .common-btn{
	// 	margin: 10rpx 30rpx;
	// }
}
.select-view{
	.title{
		font-size: 24rpx;
		color: #999999;
	}
}
.select-list{
	background-color: #D8D8D8;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	.select-item{
		position: relative;
		display: flex;
		align-items: center;
		background-color: #ebebeb;
		color: #333333;
		font-size: 24rpx;
		height: 50rpx;
		padding: 0 70rpx 0 20rpx;
		border-radius: 40rpx;
		margin: 10rpx 10rpx 0 48rpx;
		.del-icon{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 0;
			right: 0;
		}
	}
}
.search-area{
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	.search-input{
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		display: flex;
		flex: 1;
		align-items: center;
		.search-icon{
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx 0 30rpx;
		}
		input{
			height: 80rpx;
			font-size: 28rpx;
			flex: 1;
		}
	}
}
.data-list{
		border-radius: 10rpx;
		height: calc( 100vh - var(--status-bar-height) - 100rpx - 130rpx);
		.data-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx 30rpx 0rpx 30rpx;
			padding: 20rpx;
			color: #333;
			font-size: 28rpx;
			white-space: normal;
			.item-title {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.title {
					flex: 1;
				}

				.status-other {
					padding: 5rpx 15rpx;
					font-size: 24rpx;
					color: #2C72FF ;
					background-color: rgba($color: #A5C2FF, $alpha: 0.16);
					border-radius: 5rpx;
				}

				.status {
					color: #FF6400;
					background-color: rgba($color: #FFCDA5, $alpha: 0.16);
				}
			}
			.item-top {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				>checkbox {
					margin-right: 5rpx;
				}


				.title {
					flex: 1;
				}
			}

			.item-middel {
				display: flex;
				margin-top: 10rpx;

				.img{
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.info{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
					.desc{
						font-size: 24rpx;
						color: #999999;
						font-weight: 400;
					}
					.amount{
						font-size: 36rpx;
						color: #FF3737;
						font-weight: 700;
						text{
							font-size: 24rpx;
							color: #FF3737;
							font-weight: 600;
						}
					}
				}
			}
			.location-view {
				display: flex;
				margin-top: 30rpx;
				padding-top: 20rpx;
				align-items: flex-start;
				font-size: 24rpx;
				border-top: 1rpx #eee solid;

				.dingwei {
					width: 30rpx;
					height: 30rpx;
					margin-top: 5rpx;
				}
				.address {
					color: #333;
					margin-left: 10rpx;
				}
				.date1 {
					color: #999;
					margin: 10rpx 0rpx;
				}
				.date2 {
					color: #2C72FF;
				}
			}

			.data-sub-item {
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #F8F8F8;
			}
			.date-view {
				font-size: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				:first-child {
					color: #999;
				}
				:last-child {
					color: #2C72FF;
					margin-top: 20rpx;
				}
			}
			.btn-view {
				display: flex;
				align-items: flex-end;
				justify-content:flex-end;
				.btn {
					font-size: 28rpx;
					width: 175rpx;
					height: 60rpx;
					margin: 0;
				}
				.btnNoBg {
					background-color: #FFFFFF;
					border: 1rpx #999999 solid;
					margin-right: 20rpx;
				}

			}
		}
	}
</style>
